<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-07-20 17:57:11
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
	<ul class="user_Overview flex" v-if="pageflag">
		<!-- <li class="user_Overview-item" style="color: #00fdfa">
			<div class="user_Overview_nums allnum ">
				<dv-digital-flop :config="config" style="width:100%;height:100%;" />
			</div>
			<p>COD</p>
		</li>
		<li class="user_Overview-item" style="color: #07f7a8">
			<div class="user_Overview_nums online">
				<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
			</div>
			<p>NH3-N</p>
		</li>
		<li class="user_Overview-item" style="color: #e3b337">
			<div class="user_Overview_nums offline">
				<dv-digital-flop :config="offlineconfig" style="width:100%;height:100%;" />

			</div>
			<p>TN</p>
		</li>
		<li class="user_Overview-item" style="color: #f5023d">
			<div class="user_Overview_nums laramnum">
				<dv-digital-flop :config="laramnumconfig" style="width:100%;height:100%;" />
			</div>
			<p>TP</p>
		</li>
		<li class="user_Overview-item" style="color: #07f7a8">
			<div class="user_Overview_nums online">
				<dv-digital-flop :config="onlineconfig" style="width:100%;height:100%;" />
			</div>
			<p>PH</p>
		</li> -->
		<dv-capsule-chart :config="config1" style="width:100%;height:220px" />
	</ul>
	<Reacquire v-else @onclick="getData" line-height="200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from 'api/modules'
	let style = {
		fontSize: 24
	}
	export default {
		data() {
			return {
				config1: {
					data: [{
							name: 'COD',
							value: 115.52
						},
						{
							name: 'NH3-N',
							value: 16.4
						},
						{
							name: 'TN',
							value: 26.48
						},
						{
							name: 'TP',
							value: 1.23
						},
						{
							name: 'PH',
							value: 7.11
						},
					],
					unit: 'mg/L',
					showValue: true
				},
				options: {},
				userOverview: {
					alarmNum: 0,
					offlineNum: 0,
					onlineNum: 0,
					totalNum: 0,
				},
				pageflag: true,
				timer: null,
				config: {
					number: [100],
					content: '{nt}',
					style: {
						...style,
						// stroke: "#00fdfa",
						fill: "#00fdfa",
					},
				},
				onlineconfig: {
					number: [0],
					content: '{nt}',
					style: {
						...style,
						// stroke: "#07f7a8",
						fill: "#07f7a8",
					},
				},
				offlineconfig: {
					number: [0],
					content: '{nt}',
					style: {
						...style,
						// stroke: "#e3b337",
						fill: "#e3b337",
					},
				},
				laramnumconfig: {
					number: [0],
					content: '{nt}',
					style: {
						...style,
						// stroke: "#f5023d",
						fill: "#f5023d",
					},
				}

			};
		},
		filters: {
			numsFilter(msg) {
				return msg || 0;
			},
		},
		created() {
			this.getData()
		},
		mounted() {},
		beforeDestroy() {
			this.clearData()

		},
		methods: {
			clearData() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			getData() {
				this.pageflag = true;
				currentGET("big2").then((res) => {
					if (!this.timer) {
						console.log("设备总览", res);
					}
					if (res.success) {
						this.userOverview = res.data;
						this.onlineconfig = {
							...this.onlineconfig,
							number: [16.4]
						}
						this.config = {
							...this.config,
							number: [115.52]
						}
						this.offlineconfig = {
							...this.offlineconfig,
							number: [26.48]
						}
						this.laramnumconfig = {
							...this.laramnumconfig,
							number: [1.23]
						}
						this.switper()
					} else {
						this.pageflag = false;
						this.$Message.warning(res.msg);
					}
				});
			},
			//轮询
			switper() {
				if (this.timer) {
					return
				}
				let looper = (a) => {
					this.getData()
				};
				this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
			},
		},
	};
</script>
<style lang='scss' scoped>
	.user_Overview {
		li {
			flex: 1;

			p {
				text-align: center;
				height: 16px;
				font-size: 16px;
			}

			.user_Overview_nums {
				width: 80px;
				height: 80px;
				text-align: center;
				line-height: 80px;
				font-size: 22px;
				margin: 50px auto 30px;
				background-size: cover;
				background-position: center center;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
				}

				&.bgdonghua::before {
					animation: rotating 14s linear infinite;
				}
			}

			.allnum {

				// background-image: url("../../assets/img/left_top_lan.png");
				&::before {
					background-image: url("../../assets/img/left_top_lan.png");
					background-size: cover;
					background-position: center center;
				}
			}

			.online {
				&::before {
					background-image: url("../../assets/img/left_top_lv.png");
					background-size: cover;
					background-position: center center;
				}
			}

			.offline {
				&::before {
					background-image: url("../../assets/img/left_top_huang.png");
					background-size: cover;
					background-position: center center;
				}
			}

			.laramnum {
				&::before {
					background-image: url("../../assets/img/left_top_hong.png");
					background-size: cover;
					background-position: center center;
				}
			}
		}
	}
</style>